<template>
    <div class="container">
      <div class="topOption">
        <div class="left">
          <span class="switchBtn">显示预测数据</span>
          <el-switch v-model="ifPredict" size="large" />
        </div>
        <div class="right">
          <el-radio-group v-model="mode" aria-label="label position" class="modeCheck">
            <el-radio-button value="day">当日</el-radio-button>
            <el-radio-button value="week">当周</el-radio-button>
            <el-radio-button value="personal">自定义</el-radio-button>
          </el-radio-group>
          <el-date-picker v-model="personalTime" type="datetimerange" start-placeholder="Start date"
            end-placeholder="End date" format="YYYY-MM-DD HH:mm:ss" date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss"
            :disabled="mode != 'personal'" class="timePicker" />
        </div>
      </div>
      <div class="chart">
        <LineCharts style="width: 100%; height: 100%;" :ifPredict="ifPredict" :startTime="startTime" :endTime="endTime" :mode="mode"></LineCharts>
      </div>
    </div>
  </template>
  
  <script setup>
  import { inject, onMounted, ref, watch } from 'vue';
  import { getCurrentTime, getMondayMidnight, getTodayMidnight, formatDateString } from '@/constant/date';
  import LineCharts from '@/components/LineCharts/index.vue'
  let ifPredict = ref(false)
  let startTime = ref(getTodayMidnight())
  let endTime = ref(getCurrentTime())
  let mode = ref("day")
  let personalTime = ref('')
  
  watch(mode, (newVal, oldVal) => {
    switch (newVal) {
      case 'day':
        startTime.value = getTodayMidnight()
        endTime.value = getCurrentTime()
        break;
      case 'week':
        startTime.value = getMondayMidnight()
        endTime.value = getCurrentTime()
        break;
      case 'personal':
        if (personalTime.value != '') {
          startTime.value = formatDateString(personalTime.value[0])
          endTime.value = formatDateString(personalTime.value[1])
        }
        break;
    }
  })
  
  watch(personalTime, (newVal, oldVal) => {
    if (mode.value=='personal') {
      startTime.value = formatDateString(newVal[0])
      endTime.value = formatDateString(newVal[1])
    }
  })
  
  </script>
  
  <style lang="scss" scoped>
  .container {
    flex: 1;
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
  
    .topOption {
      flex-shrink: 0;
      width: 100%;
      height: 50px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      justify-content: space-between;
      padding: 0 25px;
  
      .left {
        display: flex;
        width: 200px;
        height: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        align-items: center;
  
        .switchBtn {
          display: flex;
          align-items: center;
          font-size: 16px;
          color: rgb(63, 168, 209);
          margin-right: 10px;
        }
      }
  
      .right {
        display: flex;
        flex:1;
  
        .modeCheck {
          margin-right: 10px;
        }
      }
    }
  
    .chart {
      width: 100%;
      height: 95%;
      display: flex;
      padding: 20px;
      box-sizing: border-box;
    }
  }
  </style>